<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>8.图形平移</title>
	<style>
		canvas {
			position: relative;
			z-index: 1;
		}
		.box{
			width: 1000px;
			height: 1000px;
			position: relative;
            background-color: rebeccapurple;

		}
		.x{
			width: 100%;
			height: 1px;
			background-color: red;
			position: absolute;
			left: 0;
			top: calc( 50% - 1px);

		}
		.y{
			height: 100%;
			width: 1px;
			background-color: red;
			position: absolute;
			left: calc( 50% - 1px);
			top: 0;

		}
	</style>
	<link rel="stylesheet" href="../utils/ui.css">
	<script src="../utils/index.js"></script>
</head>
<body>
	<div id="ui">
		<div id="x"></div>
		<div id="y"></div>
	</div>
	<div class="box">
		<canvas id="gl"></canvas>
		<div class="x"></div>
		<div class="y"></div>
	</div>
	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		uniform vec2 u_transform;
		uniform vec2 u_size;
		void main(){
			gl_Position =vec4(a_position.xy+u_transform-u_size / 2.0,1,1);
		}
	</script>
	
	<script type="x-shader/x-fragment" id="fragment">
		void main(){
			gl_FragColor =vec4(0.0,1.0,1.0,1.0);
		}
	</script>
	<script>
		 /** @type {HTMLCanvasElement} */   
		const canvas=document.getElementById("gl")
		const gl=canvas.getContext("webgl")
		canvas.width=1000
		canvas.height=1000
		//流程 1.创建着色器 编译 链接
		const vertex=document.getElementById("vertex").textContent
		const fragment=document.getElementById("fragment").textContent

		const vertexShader=gl.createShader(gl.VERTEX_SHADER)
		const fragmentShader=gl.createShader(gl.FRAGMENT_SHADER)
		gl.shaderSource(vertexShader,vertex)
		gl.shaderSource(fragmentShader,fragment)
		gl.compileShader(vertexShader)
		gl.compileShader(fragmentShader)
		const program=gl.createProgram()
		gl.attachShader(program,vertexShader)
		gl.attachShader(program,fragmentShader)
		gl.linkProgram(program)
		gl.useProgram(program)
		
		//获取变量
		const a_position=gl.getAttribLocation(program,"a_position")
		const u_transform=gl.getUniformLocation(program,"u_transform")
		const u_size=gl.getUniformLocation(program,"u_size")
		const transform=[0,0]
		webglUtils.setupSlider("#x",{
			min:-1,
			max:1,
			value:transform[1],
			step:0.01,
			precision:2,
			handle:(e,v)=>{
				transform[0]=v.value
				draw()
			}
		})
		webglUtils.setupSlider("#y",{
			min:-1,
			max:1,
			value:transform[1],
			step:0.01,
			precision:2,
			handle:(e,v)=>{
				transform[1]=v.value
				draw()
			}
		})
		function draw(){
			gl.enableVertexAttribArray(a_position)
			const bufferData=gl.createBuffer()
			gl.bindBuffer(gl.ARRAY_BUFFER,bufferData)
			const position=[
				0,0,
				0.1,0,
				0.1,-0.5,

				0,0,
				0.1,-0.5,
				0,-0.5,

				
				0.1,0,
				0.3,0,
				0.3,-0.1,

				0.1,0,
				0.3,-0.1,
				0.1,-0.1,

				0.1,-0.2,
				0.3,-0.2,
				0.3,-0.3,

				0.1,-0.2,
				0.3,-0.3,
				0.1,-0.3,
			]
			let size=[0.3,-0.5]
			gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(position),gl.STATIC_DRAW)
			gl.clear(gl.COLOR_BUFFER_BIT)
			gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0)
			gl.uniform2fv(u_transform,transform)
			gl.uniform2fv(u_size,size)
			gl.drawArrays(gl.TRIANGLES, 0, position.length/2);
		}
		
		gl.viewport(0,0,1000,1000)
		//画点
		draw()
	</script>
</body>
</html>
